@import "MCP-Less";
/* ==================================== Styles for basic forms ==================================== */
body {
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
    margin: 0;
    padding: 0;
}

header, footer, nav, section {
    display: block;
}

fieldset {
    border: 1px solid #ddd;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}


/* ==================================== Styles for validation helpers ==================================== */
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}

/* ==================================== NAVBAR ==================================== */

.navbar {
    width: 100%;
    background-color: #cccccc;
    margin: 0;
    padding: 0;
    display: block;
}

    .navbar ul {
        padding: 0;
    }

        .navbar ul li {
            list-style: none;
            display: inline;
        }

            .navbar ul li a {
                text-decoration: none;
                color: white;
                font-family: Verdana, Helvetica, Sans-Serif;
            }

            .navbar ul li.separator {
                padding: 0 5px 0 5px;
            }

/* ==================================== Admin panel ==================================== */
#admin-panel-body {
    background-color: #abc;
}

/* ==================================== User page template ==================================== */

body#user-page-body {
    background: #DEE1E3;
}

header.user-template {
    width: 100%;
    height: 150px;
    min-height: 150px;
    text-align: center;
    vertical-align: middle;
}

#mcp-logo {
    font: bold 85px "Segoe UI";
    width: 260px;
    height: 100%;
    display: inline;
    float: left;
}

#mcp-short-name {
    font-size: 1em;
}

#mcp-full-name {
    font-size: .18em;
}

#mcp-slogan {
    font-size: .1em;
}

#mcp-full-name, #mcp-slogan {
    text-align: right;
    margin-right: 15px;
}

#header-info-panel {
    width: 370px;
    height: 130px;
    float: right;
    margin: 10px;
    
    >:nth-child(1) {
        width: 100%;
        height: 20px;
        margin-bottom: 3px;
        text-align: right;
    }
}

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #000;
  -webkit-box-shadow: 3px 3px 5px 6px #000;
  box-shadow:         3px 3px 5px 6px #000;
}
    
#regular-message {
    background: black;
    height: 107px;
    
    >:nth-child(1) {
        width: 100%;
        height: 17px;
        background-color: #cccccc; 
        
        .rounded-upper-corners(@corner-radius-large);
        
        span {
            color: white;
        }
    }

    .previous-message {
        float: left;
        margin-left: 8px;
    }

    .next-message {
        float: left;
        margin-left: 2px;
    }

    .message-counter {
        float: right;
        margin-right: 8px;
    }
    
    .rounded-corners-large;
}

.gradient {
    background: url();
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(222,225,227,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(222,225,227,0)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(222,225,227,0) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(222,225,227,0) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(222,225,227,0) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(222,225,227,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00dee1e3',GradientType=0 );
}

#content {
    margin: 0 5px;
}

/* ==================================== Login page ==================================== */
.login-legend {
    font-family: Berlin Sans FB;
    font-style: italic;
    font-weight: 200;
}

.login-content {
    vertical-align: middle;
    width: 200px;
    height: 180px;
    margin: 10% auto 0 auto;
    text-align: center;
}

.validation-info {
    width: 200px;
    height: 100px;
}

.about-link {
    width: 10%;
    margin: auto;
}

footer.login-footer {
    text-align: center;
    position: fixed;
    bottom: 35px;
    width: 100%;
}

/* ==================================== Checks list ==================================== */

.marged-left {
    margin-left: 10px;
}

#checkList-list .check-info {
    border: 1px solid #2b7d93;
    margin: 10px 10px 25px 10px;
    padding: 3px 6px;
    width: 60%;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 3px 3px 5px 6px #ccc;
}

#checkList-list .check-date, #checkList-list .check-time {
    font-weight: 600;
    color: #2b7d93;
}

div#add-new-check {
    border: 1px solid #ddd;
}

div#navigation {
    border: 1px solid rgba(154, 74, 74, 0.69);
    margin: 5px 4px;
}

    div#navigation .apply {
        display: inline;
        margin: 0 4px;
    }

    div#navigation .cancel {
        display: inline;
        margin: 0 4px;
    }

div#new-check-item a.new-item-buttons {
    margin: 0 4px;
    font-style: italic;
}

#new-check-area {
    margin: 0 4px;
    border: 1px solid #abc;
}

    #new-check-area div {
        margin: 5px 4px;
    }

        #new-check-area div input {
            float: right;
        }

#categories-autocomplete {
    height: 14px;
    margin: 0 2px;
    background-color: gainsboro;
}

.page-info {
    font-family: "Segoe UI";
    font-size: 16px;
    color: #2b7d93;
    width: 40%;
    margin: 10px 30px;
}

/* ===================== About page ===================== */

#content-about span {
    color: #2b7d93;
}

span.important {
    font-weight: bold;
}

span.technology-used {
    text-decoration: cancel-underline;
}

a.contact-link {
    text-decoration: none;
    color: #2b7d93;
    font-weight: bold;
}

    a.contact-link:hover {
        text-decoration: underline;
    }

a.outgo-link {
    color: #2b7d93;
}

    a.outgo-link:hover, a.contact-link:hover {
        color: #2b7df9;
    }

div#content-about {
    margin: 0 15px;
    padding: 5px 10px;
    border: 1px solid #aabbcc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.article-title {
    padding: 0 18px;
    color: #2b7d93;
}

    .article-title span {
        text-decoration: underline;
    }
